<template>
  <div class="expertArticles">
    <div class="container">
      <div class="expertTitle">
        <search-title :type="type" @searchArticle="searchList">
          <span slot="quoteTitle">SAP(四川)产业赋能中心-客户案例</span>
        </search-title>
      </div>
      <div v-if="ArticleList.length != 0">
        <div class="content" v-if="this.deviceType==='pc'">
          <card-list v-for="(item,index) in ArticleList" :key="index" :articleList="item"></card-list>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[this.limit]"
            :page-size="this.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          ></el-pagination>
        </div>
        <div class="content" v-if="this.deviceType === 'mobile'">
          <quote-card :articleList="ArticleList"></quote-card>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[this.limit]"
            :page-size="this.limit"
            layout="prev, pager, next"
            :total="totalCount"
          ></el-pagination>
        </div>
      </div>
      <div class="content" v-else>
        <h2>没有数据</h2>
      </div>
    </div>
  </div>
</template>

<script>
import swiperList from "../../components/quoteHome/swiper";
import searchTitle from "../../components/quoteHome/searchTitle";
import cardList from "../../components/quoteHome/cardList";
import quoteCard from "../../components/quoteHome/quoteCard";
import { ReqArticle } from "../../request/index";
export default {
  data() {
    return {
      deviceType: "",
      ArticleList: [],
      type: 4,
      currentPage: 1,
      totalCount: 0,
      limit: 4,
      page: 1
    };
  },
  components: {
    searchTitle,
    swiperList,
    cardList,
    quoteCard
  },
  methods: {
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    async getArticle(page) {
      let data = {
        limit: this.limit,
        page: page,
        type: 4
      };
      let resArticle = await ReqArticle(data);
      resArticle.page.list.sort(function(a, b) {
        return a.gmtCreated < b.gmtCreated ? 1 : -1;
      });
      this.totalCount = resArticle.page.totalCount;
      this.ArticleList = resArticle.page.list;
    },
    searchList(item) {
      // console.log(item);
      this.ArticleList = item;
    },
    handleCurrentChange(val) {
      this.getArticle(val);
    }
  },
  async created() {
    await this.getArticle();
  },
  mounted() {
    if (this._isMobile()) {
      this.deviceType = "mobile";
    } else {
      this.deviceType = "pc";
    }
  }
};
</script>

<style>
.expertArticles {
  width: 100%;
  background-color: rgb(245, 245, 245);
}
.expertArticles .container {
  width: 80%;
  margin: 0px auto;
  margin-top: 30px;
  /* padding-bottom: 50px; */
}
.el-pagination {
  margin: 0 auto;
  width: fit-content;
  padding: 20px 0;
}
@media screen and (max-width: 1532px) {
  .expertArticles .container {
    width: 98%;
  }
}
@media screen and (max-width: 420px) {
  .expertArticles .container {
    width: 98%;
    margin-top: 20px;
    padding-bottom: 20px;
  }
  .cardList .cardContainer .cardContent {
    width: 98%;
  }
}
</style>